<template>
  <div style="padding:0 15px;" class="hamburger-container" @click="toggleClick">
    <i class="icon iconfont el-icon-hamburger hamburger" :class="{'is-active':isActive}" style="font-size:20px"></i>
  </div>
</template>


<script setup>
const emits = defineEmits(['setsActive'])
const {isActive} = defineProps({
  isActive: {
    type: Boolean
  }
})

function toggleClick (){
  emits('setsActive')
}
</script>

<style scoped lang="scss">
.hamburger-container{
    line-height: 46px;
    height: 100%;
    float: left;
    cursor: pointer;
    -webkit-transition: background 0.3s;
    transition: background 0.3s;
    -webkit-tap-highlight-color: transparent;
}
.hamburger-container:hover{
    background: rgba(0, 0, 0, 0.025);
}
.hamburger {
  display: inline-block;
}

.hamburger.is-active {
  transform: rotateY(180deg);
}
</style>